<%--
  Created by IntelliJ IDEA.
  User: ddd
  Date: 2018/4/16
  Time: 21:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>斑马线交规驾考系统后台管理</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min93e3.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin.css">
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="admin-container">
        <table id="cartypetable" data-mobile-responsive="true"></table>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table-mobile.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">

    $.ajax({
        type: 'GET',
        dataType: "json",
        url: '/level',
        success: function (result) {
            console.info(result.uservos);

            $('#cartypetable').bootstrapTable({
                data: result.uservos,
                method: 'GET',
                striped: true,
                cache: false,
                height: 690,
                pagination: true,
                sidePagination: "client",
                pageNumber: 1,
                pageSize: 15,
                pageList: [10, 15, 25],
                clickToSelect: true,
                uniqueId: "id",
                columns: [
                    {
                        field: 'title',
                        title: '车型'
                    },
                    {
                        field: '',
                        title: '科目',
                        formatter: function (value, row) {
                            var courseData = row.courseVos;
                            //对courseData对象进行重新排序
                            function JsonSort(courseData, key) {
                                for (var j = 1; j < courseData.length; j++) {
                                    var temp = courseData[j],
                                        val = temp[key],
                                        i = j - 1;
                                    while (i >= 0 && courseData[i][key] > val) {
                                        courseData[i + 1] = courseData[i];
                                        i = i - 1;
                                    }
                                    courseData[i + 1] = temp;
                                }
                                return courseData;
                            }

                            var courseData = JsonSort(courseData, 'id');
//                            console.info(courseData);

                            var $div = $("<div>");
                            var $course = $("<table>").addClass("table");
                            $div.append($course);
                            for (var j = 0; j < courseData.length; j++) {
                                var $tr = $("<tr>");
                                $course.append($tr);
                                var $td1 = $("<td>").append($("<i>").addClass("fa fa-file-text").html(courseData[j].name + "(" + courseData[j].exertypes.length + ")"));
                                $tr.append($td1);
                                var $td2 = $("<td>");
                                $tr.append($td2);
                                var $td3 = $("<td>");
                                $tr.append($td3);
                                $td3.append($("<img>").attr("src", courseData[j].imgpath).attr("width", "40"));
                                var $td4 = $("<td>").addClass(courseData[j].id + 'course');
                                $td4.append($("<input>").attr("type", "hidden").val(courseData[j].name));
                                $td4.append($("<input>").attr("type", "hidden").val(courseData[j].longtime));
                                $td4.append($("<input>").attr("type", "hidden").val(courseData[j].number));
                                $td4.append($("<input>").attr("type", "hidden").val(courseData[j].imgpath));
                                $td4.append($("<input>").attr("type", "hidden").val(courseData[j].zname));
                                $tr.append($td4);
                                $td4.append($("<button>").addClass("btn btn-xs btn-primary").attr("onclick", "EditCourse(" + courseData[j].id +
                                    ")").html("编辑"));
                                $td4.append("&nbsp;");
                                $td4.append($("<button>").addClass("btn btn-xs btn-success").attr("onclick", "AddExer(" + courseData[j].id + ")").html("新增习题分类"));
                                for (var i = 0; i < courseData[j].exertypes.length; i++) {
                                    if (courseData[j].exertypes[i].status === 1) {
                                        var $a = $td2.append($("<a>").addClass(courseData[j].exertypes[i].id+'exertype').attr("href", "javascript:void(0)").attr("onclick", "EditExer(" + courseData[j].exertypes[i].id + ")").html("[" + courseData[j].exertypes[i].px + "]" + courseData[j].exertypes[i].name));
                                    } else {
                                        var $a = $td2.append($("<a>").addClass(courseData[j].exertypes[i].id+'exertype').attr("href", "javascript:void(0)").attr("onclick", "EditExer(" + courseData[j].exertypes[i].id + ")").html("[" + courseData[j].exertypes[i].px + "]" + courseData[j].exertypes[i].name).css("color", "red"));
                                    }
                                    $a.append($("<input>").attr("type", "hidden").val(courseData[j].exertypes[i].name));
                                    $a.append($("<input>").attr("type", "hidden").val(courseData[j].exertypes[i].px));
                                    $a.append($("<input>").attr("type", "hidden").val(courseData[j].exertypes[i].status));
                                    $a.append($("<input>").attr("type", "hidden").val(courseData[j].exertypes[i].imgpath));
                                    $a.append($("<input>").attr("type", "hidden").val(courseData[j].exertypes[i].zname));
                                    $a.append("&nbsp;&nbsp;");
                                }
                            }
                            return $div.html();
                        }
                    },
                    {
                        field: 'imgpath',
                        title: '图标',
                        formatter: function (value, row, index) {
                            var s;
                            if (row.imgpath) {
                                var url = row.imgpath;
                                s = '<img style="width: 100px"  src="' + url + '" />';
                            }
                            return s;
                        }
                    }, {
                        title: "操作",
                        formatter: function (value, row, index) {
                            return '<button class="btn btn-xs btn-primary editcx" onclick="EditCarType(' + row.id + ')">编辑</button>' +
                                '&nbsp;' +
                                '<button class="btn btn-xs btn-success addcx" onclick=\'AddCourse(' + row.id + ')\'>新增科目</button>';
                        }
                    }
                ]
            });
        }
    });

    function EditCarType(key) {
        var aa = $('#cartypetable').bootstrapTable('getRowByUniqueId', key);
        console.info(aa);
        layer.open({
            type: 2,
            title: '编辑车型信息',
            area: ['800px', '300px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/cartype/editcartype.jsp?key=" + key,
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.find("input[name='title']").val(aa.title);
                body.find(".mg").append($("<a>").attr("href", aa.imgpath).attr("title", "查看大图").attr("target", "_blank").append($("<img>").attr("src", aa.imgpath).css("width", "20px")));
                body.find("input[name='id']").val(aa.id);
            }
        });
    }

    //新增科目
    function AddCourse(key) {
        layer.open({
            type: 2,
            title: '新增科目信息',
            area: ['800px', '400px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/cartype/addcourse.jsp?key=" + key,
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.find("input[name='cartypeid']").val(key);
            }
        });
    }

    function EditCourse(key) {
        layer.open({
            type: 2,
            title: '编辑科目信息',
            area: ['800px', '400px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/cartype/editcourse.jsp?key=" + key,
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                var $ss = $("." + key + "course").find("input");
                body.find("input[name='name']").val($ss.eq(0).val());
                body.find("input[name='zname']").val($ss.eq(4).val());
                body.find("input[name='longtime']").val($ss.eq(1).val());
                body.find("input[name='number']").val($ss.eq(2).val());
                body.find(".mg").append($("<a>").attr("href", $ss.eq(3).val()).attr("title", "查看大图").attr("target", "_blank").append($("<img>").attr("src", $ss.eq(3).val()).css("width", "20px")));
                body.find("input[name='id']").val(key);
            }
        });
    }

    function AddExer(key) {
       layer.open({
            type: 2,
            title: '新增习题分类',
            area: ['800px', '450px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/cartype/addexer.jsp?key=" + key,
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.find("input[name='coid']").val(key);
            }
        });
    }

    function EditExer(key) {
        layer.open({
            type: 2,
            title: '编辑习题分类',
            area: ['800px', '450px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/cartype/editexer.jsp?key=" + key,
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                var $ss = $("."+key+"exertype").nextAll("input");
                body.find("input[name='name']").val($ss.eq(0).val());
                body.find("input[name='zname']").val($ss.eq(4).val());
                body.find("input[name='px']").val($ss.eq(1).val());
                body.find("select[name='status']").val($ss.eq(2).val()).change();
                body.find(".mg").append($("<a>").attr("href", $ss.eq(3).val()).attr("title", "查看大图").attr("target", "_blank").append($("<img>").attr("src", $ss.eq(3).val()).css("width", "20px")));
                body.find("input[name='id']").val(key);
            }
        });
    }

</script>
</body>
</html>
